<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>{{ $t("审核详情") }}</span>
            <el-button style="float: right; padding: 3px 0" type="text" @click="$router.push('/')">{{
              $t("返回触达平台")
            }}</el-button>
          </div>
          <div>
            <el-descriptions
              class="detail-descriptions"
              contentClassName="content-class"
              labelClassName="label-class"
              :title="this.$t('基础信息')"
              :column="2"
              border
            >
              <el-descriptions-item>
                <template slot="label">
                  {{ this.$t("ID") }}
                </template>
                {{ reviewData.id }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  {{ this.$t("类型") }}
                </template>
                {{ this.utils.getDicLabel("reviewType", reviewData.type) }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  {{ this.$t("空间ID") }}
                </template>
                {{ reviewData.spaceId }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  {{ this.$t("申请人") }}
                </template>
                {{ reviewData.user }}
              </el-descriptions-item>

              <el-descriptions-item>
                <template slot="label">
                  {{ this.$t("创建时间") }}
                </template>
                {{ reviewData.createTime }}
              </el-descriptions-item>
            </el-descriptions>
            <el-descriptions
              v-if="reviewData.type === 0"
              class="detail-descriptions"
              contentClassName="content-class"
              labelClassName="label-class"
              :title="this.$t('空间详情')"
              :column="2"
              border
            >
              <el-descriptions-item :label="this.$t('空间名称')"> {{ spaceData.name }} </el-descriptions-item>
              <el-descriptions-item :label="this.$t('空间ID')"> {{ spaceData.spaceId }} </el-descriptions-item>
              <el-descriptions-item :label="this.$t('空间描述')"> {{ spaceData.info }} </el-descriptions-item>
            </el-descriptions>

            <!-- 任务详情 开始 -->

            <touch-detail
              v-if="reviewData.type === 1"
              :touchId="this.reviewData.detailId.split('-')[1]"
              :needRequest="true"
            ></touch-detail>
            <div class="detail-bottom">
              <div class="detail-button" v-if="reviewData.type === 1">
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="$t('向自己发一份触达，用以预览效果')"
                  placement="top-start"
                >
                  <el-button type="primary" @click="cratePreviewTouch"> {{ this.$t("预览") }}</el-button>
                </el-tooltip>
              </div>
              <div class="detail-button">
                <el-button type="primary" @click="openHandleUrl">{{ this.$t("处置") }}</el-button>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
    </el-row>
  </div>
</template>

<script>
import TouchDetail from "views/touch/detail.vue";
import {
  reviewPageApi,
  reviewUpdateApi,
  reviewDelteApi,
  reviewDetailApi,
  spaceDetailApi,
  touchDetailTaskApi,
  previewTouchApi, //审核-触达任务预览
} from "api/dataCenter.js";

export default {
  components: { TouchDetail },
  props: {},
  data() {
    return {
      reviewData: {},
      spaceData: {},
    };
  },
  watch: {},
  computed: {},
  methods: {
    openHandleUrl() {
      let { handleUrl } = this.reviewData;
      if (handleUrl) {
        window.open(handleUrl);
      } else {
        this.message.error({ message: this.$t("处置地址有误，请联系管理员") });
      }
    },
    cratePreviewTouch() {
      let { id, msgChannel } = this.touchData;
      let msg = msgChannel == 1 ? this.$t("预览发送成功，请到DC查看详情") : this.$t("预览发送成功，请到邮箱查看详情");
      previewTouchApi({
        requestData: { id },
      }).then((res) => {
        if (res.code !== 0) return;
        this.message.success({
          message: msg,
        });
      });
    },
  },
  created() {},
  mounted() {
    let loading = this.openLoading();
    reviewDetailApi({ requestData: this.$route.params.id }).then((res) => {
      this.reviewData = res.data;
      let { detailId, type } = res.data;
      // console.log(res);
      if (type == 0) {
        let spaceId = detailId.split("-")[1];
        spaceDetailApi({ requestData: spaceId }).then((res) => {
          // console.log("res >", res);
          if (res.code === 0) {
            this.spaceData = res.data;
          }
        });
      } else {
        touchDetailTaskApi({
          requestData: detailId.split("-")[1],
        }).then((res) => {
          // console.log("touchDetailTaskApi res", res);
          if (res.code === 0) {
            this.touchData = res.data;
          }
        });
      }
      loading.close();
    });
  },
};
</script>
<style lang="scss" scoped>
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
// .bg-purple-dark {
//   background: #99a9bf;
// }
// .bg-purple {
//   background: #d3dce6;
// }
// .bg-purple-light {
//   background: #e5e9f2;
// }
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.detail-descriptions {
  margin-bottom: 10px;
}
::v-deep .label-class {
  width: 100px;
}
.detail-bottom {
  display: flex;
  justify-content: center;
  .detail-button {
    padding: 15px 10px 10px 10px;
  }
}
</style>
